<template>
  <view class="imgList">
    <view
      class="imgListItem"
      v-for="(el, i) of item.goods_list.filter((el, i) => i < 4)"
      :key="i"
      @click.stop="Emit.$emit('handle', 'pop', item)"
    >
      <view class="imgListBox">
        <image mode="aspectFill" :src="el.goods_pic" lazy-load></image>
      </view>
    </view>

    <view
      class="imgListItem imgListTotal"
      @click.stop="Emit.$emit('handle', 'pop', item)"
    >
      <view class="imgListBox">
        <view class="total">
          <view class="price">
            ¥<view>{{ getTotal(item)[0] }}</view
            >.{{ getTotal(item)[1] }}
          </view>

          <view class="num">共{{ getTotal(item)[2] }}件</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: null,
    },
  },

  computed: {
    getTotal() {
      return (item) => {
        if (!item || !item.goods_list || !item.goods_list.length)
          return ["0", "00", 0];
        let total = 0;

        item.goods_list.forEach((el) => {
          total += parseFloat(el.price) * parseInt(el.num);
        });

        total = total.toFixed(2).split(".");

        return [total[0], total[1], item.goods_list.length];
      };
    },
  },
};
</script>

<style lang="less" scoped>
.imgList {
  position: relative;
  display: flex;
  margin: 0 -10rpx;

  .imgListItem {
    width: 25%;
    padding: 0 10rpx;

    .imgListBox {
      position: relative;
      padding-top: 100%;
    }

    image {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #f2f2f2;
      border-radius: 10rpx;
    }
  }
}

.imgListTotal {
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(
    270deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.6) 100%
  );
  border-radius: 0rpx 0rpx 0rpx 0rpx;
}

.total {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding-right: 10rpx;
  width: 100%;
  height: 100%;

  .num {
    font-size: 24rpx;
    color: #8c8c8c;
  }
}

.price {
  display: flex;
  align-items: flex-end;
  font-size: 24rpx;
  color: #262626;
  font-weight: bold;

  view {
    font-size: 32rpx;
    font-weight: bold;
    line-height: 1.2;
  }
}
</style>
